<template>
    <div class="details">
      <Navbar></Navbar>
      <Topper></Topper>
      <List></List>
  
      <div class="big_giftbox_details">
        <hr />
        <p>
          <Breadcrumb></Breadcrumb>
        </p>
        <div class="giftbox_details">
          <el-image class="giftbox-image" style="width: 500px; height: 500px; display: block" :src="giftboxForm.giftboxImg">
          </el-image>
          <div class="giftbox_description">
            <span>{{ giftboxForm.giftboxName }}</span>
            <hr />
            <div>
              描述：
              <p>{{ giftboxForm.giftboxDescription }}</p>
            </div>
            <div>价格：{{ giftboxForm.giftboxPrice }}</div>
            <div>库存：{{ giftboxForm.giftboxStock }}</div>
            <div>上架时间：{{ giftboxForm.createTime }}</div>
            <div>
              数量： <button @click="number--">-</button>&nbsp;{{ number }}
              <button @click="number++">+</button>
  
            </div>
            <p class="buy">
              <el-button plain size="medium" class="buy" @click="addCart()"> 加入购物车</el-button>
              <el-button type="warning" size="medium" class="buy" @click="toBuy()">立即购买</el-button>
            </p>
          </div>
        </div>
        <div class="giftbox_img">
          <div class="lower_nav">
            <span>产品详情</span>
  
  
  
          </div>
  
          <div class="main_img">
            <hr>
            <img :src="this.giftboxForm.giftboxDetail">
            <!-- <img src="https://upyun.dinghuale.com/uploads/20230216/202302161317136978.jpg"> -->
            <img src="https://upyun.dinghuale.com/uploads/20230216/202302161317098481.jpg">
  
          </div>
  
        </div>
  
  
  
  
  
      </div>
      <Footer></Footer>
  
      <el-dialog title="加入购物车" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <!-- <span>鲜花名称:{{ giftboxForm.giftboxName }}</span> -->
        <h3>花束名称:{{ giftboxForm.giftboxName }}</h3>
        <h4>数量:{{ number }}</h4>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sureForm()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import Navbar from "@/components/Navbar.vue";
  import Topper from "@/components/Topper.vue";
  import Footer from "@/components/Footer.vue";
  import List from "@/components/List.vue";
  import Breadcrumb from "@/components/Breadcrumb.vue";
  import { getById } from "@/api/giftbox"
  import { saveCart } from "@/api/Cart"
  export default {
    components: {
      Navbar,
      Topper,
      List,
      Breadcrumb,
      Footer
    },
    data() {
      return {
        dialogVisible: false,
        number: 1,
        giftboxForm: {
  
        },
  
      };
    },
    methods: {
      toBuy(){
        let params = {
                      'outTradeNo':this.giftboxForm.giftboxId,
                      // 'outTradeNo':1,
                      // 'subject': this.orders.business.businessName,
                      'subject': this.giftboxForm.giftboxName,
                      // "totalAmount": this.orders.orderTotal
                      "totalAmount": this.giftboxForm.giftboxPrice
                  }
  
          // location.href = this.$axios.defaults.baseURL + "server/payment/pcPayment?"+ this.$qs.stringify(params);
          window.open("http://127.0.0.1:9600/server/alipay/pay?subject="+this.giftboxForm.giftboxName+"&traceNo="+Math.floor(Math.random() * 900000) + 100000+"&totalAmount="+this.giftboxForm.giftboxPrice*this.number,'_self')
  
  
      },
      init() {
        getById(this.$route.query.giftboxId)
          .then((res) => {
            this.giftboxForm = res.data
          })
      },
      sureForm() {
  
        let cartForm = {
          cartImage: this.giftboxForm.giftboxImg,
          cartName: this.giftboxForm.giftboxName,
          cakePrice: this.giftboxForm.giftboxPrice,
          cartNumber: this.number,
  
        }
  
        saveCart(cartForm).then((res) => {
  
        })
  
  
  
        this.dialogVisible = false
        this.$message({
          type: 'success',
          message: '添加成功!'
        });
  
  
      },
      addCart() {
        this.dialogVisible = true
  
      },
      handleClose(done) {
  
      }
      ,
    },
    mounted() {
      this.init();
    },
    watch: {
      number: {
        handler(newVal, oldVal) {
  
          if (this.number <= 0) {
  
            this.number = 0;
          }
  
  
        }
      }
    }
  };
  </script>
  
  <style lang="scss">
  .details {
    .el-dialog{
      h3{
        margin-bottom: 20px;
      }
    }
    background-color: #f5f5f5;
  
    .big_giftbox_details {
      hr {
        border: none;
        /* 移除默认的边框 */
        height: 2px;
        /* 设置水平线的高度 */
        background-color: #884e22;
        /* 设置水平线的颜色 */
        margin: 20px 0;
        /* 设置上下外边距 */
      }
  
      .giftbox_details {
        background-color: #ffffff;
        // border:1px solid black;
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        display: flex;
  
        // align-items: center;
  
        .giftbox-image {
          margin: 20px;
        }
  
        .giftbox_description {
          span {
            color: #333333;
            font-weight: 700;
          }
  
          margin-top: 20px;
          font-size: 30px;
          color: #666666;
          flex: 1;
          text-align: left !important;
          margin-left: 40px;
  
          div {
            margin-top: 40px;
  
            button {
              width: 30px;
              height: 30px;
            }
  
            p {
              color: #333333;
            }
          }
        }
      }
  
      .giftbox_img {
        background-color: #ffffff;
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        margin-top: 30px;
  
        .lower_nav {
  
          height: 50px;
          text-align: left;
  
          span {
            line-height: 50px;
            // line-height: 50px;
            // text-decoration-line: underline;
            color: #884e22;
  
          }
        }
  
        .main_img {
          text-align: center;
        }
      }
    }
  }</style>